<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>

    <style>
      ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
      .header {
        text-align: center;
      }
      main {
        width: 700px;
        height: 400px;
        border: 1px solid;
        margin: 0 auto;
      }
      li {
        width: 120px;
        height: 120px;
        /* background-color: #f0f0f0; */
        /* border: 1px solid; */
        margin-top: 10px;
        text-align: center;
        position: relative;
      }
      img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.3;
        /* display: none; */
      }
      .active {
       opacity: 1;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="header">
        <h3>名车车标展示</h3>
      </div>
      <div class="box">
        <ul>
          <li>
            <img src="img/1.jpg" alt="" />
          </li>
          <li>
            <img src="img/2.jpg" alt="" />
          </li>
          <li>
            <img src="img/3.jpg" alt="" />
          </li>
          <li>
            <img src="img/4.jpg" alt="" />
          </li>
          <li>
            <img src="img/5.jpg" alt="" />
          </li>
          <li>
            <img src="img/6.jpg" alt="" />
          </li>
          <li>
            <img src="img/7.jpg" alt="" />
          </li>
          <li>
            <img src="img/8.jpg" alt="" />
          </li>
          <li>
            <img src="img/9.jpg" alt="" />
          </li>
          <li>
            <img src="img/10.jpg" alt="" />
          </li>
        </ul>
      </div>
    </main>
    <script>
      var lis = document.querySelectorAll("li");
      var img = document.querySelectorAll("img");
      var index = 0;
      var lastindex = index;

      for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onmouseenter = function() {
          index = this.index;
          show();
        };
        lis[i].onmouseleave = function() {
           img[lastindex].className=''
        };
      }
      function show() {
        img[lastindex].className = "";
        img[index].className = "active";
        lastindex = index;
      }
    </script>
  </body>
</html>
